'use client'
import {
   MenuFoldOutlined,
   HomeOutlined,
   MenuUnfoldOutlined,
   FileOutlined,
   DownOutlined,
   UserOutlined,
   BookOutlined,
   InboxOutlined
} from '@ant-design/icons';
import {
   Layout, Menu, Dropdown, MenuProps, Button, Popconfirm, Table, Modal, Form,
   Input, Radio, ConfigProvider, message, Tooltip, Spin, Upload
} from 'antd';
import type { TableColumnsType, GetRef, PopconfirmProps, InputRef } from 'antd';
import type { TableProps, UploadProps } from 'antd';
import type { PaginationProps } from 'antd';
import React, { useState, ChangeEvent, useEffect, useRef, useContext } from 'react';
import type { DraggableData, DraggableEvent } from 'react-draggable';
import Draggable from 'react-draggable';
import { useRouter } from 'next/navigation'
import zhCN from 'antd/es/locale/zh_CN';
import { getCookie } from '../utils'
const { Header, Sider, Content } = Layout;
interface DataType {
   toid: number,
   toname: string;
   toabbreviation: string;
   todataNumber: number;
   tomodifytime: string,
   tocreatetime: string;
   tolelvel1: string,
   tolelvel2: string,
   tolelvel3: string,
   tolelvel4: string,
   tolelvel5: string,
   tostatus: string,
   todescription: string
}
interface DataModalType {
   twid: string,
   twname: string;
   twoname: string;
}
type FieldType = {
   toname: string;
   toabbreviation: string;
   tolelvel1?: string;
   tolelvel2?: string;
   tolelvel3?: string;
   tolelvel4?: string;
   tolelvel5?: string;
   tostatus: string;
   todescription?: string;

};
const { TextArea } = Input;
const { Dragger } = Upload;
// 这里写导入的逻辑
const uploadFileProps: UploadProps = {
   name: 'file',
   multiple: false,
   action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
   onChange(info) {
      console.log(info)
      const { status } = info.file;
      if (status !== 'uploading') {
         console.log(info.file, info.fileList);
      }
      if (status === 'done') {
         message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
         message.error(`${info.file.name} file upload failed.`);
      }
   //   const file = event.target.files[0];
   //  const reader = new FileReader();
   //  reader.onload = (e) => {
   //    const data = new Uint8Array(e.target.result);
   //    const workbook = XLSX.read(data, { type: 'array' });
   //    const firstSheetName = workbook.SheetNames[0];
   //    const worksheet = workbook.Sheets[firstSheetName];
   //    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
   //    console.log(jsonData); // 这里你可以处理解析出来的数据
   //  };
   //  reader.readAsArrayBuffer(file);
   },
   onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
   },
   beforeUpload: (file) => {
      return false
   }
};
type FormInstance<T> = GetRef<typeof Form<T>>;
const EditableContext = React.createContext<FormInstance<any> | null>(null);
interface EditableRowProps {
   index: number;
}
interface EditableCellProps {
   title: React.ReactNode;
   editable: boolean;
   dataIndex: keyof DataModalType;
   record: DataModalType;
   handleSave: (record: DataModalType) => void;
}
const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
   const [form] = Form.useForm();
   return (
      <Form form={form} component={false}>
         <EditableContext.Provider value={form}>
            <tr {...props} />
         </EditableContext.Provider>
      </Form>
   );
};
const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
   title,
   editable,
   children,
   dataIndex,
   record,
   handleSave,
   ...restProps
}) => {
   const [editing, setEditing] = useState(false);
   const inputRef = useRef<InputRef>(null);
   const form = useContext(EditableContext)!;

   useEffect(() => {
      if (editing) {
         inputRef.current?.focus();
      }
   }, [editing]);

   const toggleEdit = () => {
      setEditing(!editing);
      form.setFieldsValue({ [dataIndex]: record[dataIndex] });
   };

   const save = async () => {
      try {
         const values = await form.validateFields();
         toggleEdit();
         handleSave({ ...record, ...values });
      } catch (errInfo) {
         console.log('Save failed:', errInfo);
      }
   };

   let childNode = children;

   if (editable) {
      childNode = editing ? (
         <Form.Item
            style={{ margin: 0 }}
            name={dataIndex}
            rules={[
               {
                  required: true,
                  message: `${title} 必填.`,
               },
            ]}
         >
            <Input ref={inputRef} onPressEnter={save} onBlur={save} />
         </Form.Item>
      ) : (
         <div className="editable-cell-value-wrap" style={{ paddingRight: 24, width: '80%', height: 32 }} onClick={toggleEdit}>
            {children}
         </div>
      );
   }

   return <td {...restProps}>{childNode}</td>;
};

const showTotal: PaginationProps['showTotal'] = (total) => `一共 ${total} 条`;
const DataClub: React.FC = () => {
   const [collapsed, setCollapsed] = useState(false);
   const [data, setData] = useState<DataType[]>([]);
   const [modaldata, setModaldata] = useState<DataModalType[]>([]);
   const [chooseAbr, setChooseAbr] = useState('')
   const [iputVal, setIputVal] = useState('');
   const [choseId, setChoseId] = useState(0);
   const [username, setUsername] = useState('');
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isNewModalOpen, setIsNewModalOpen] = useState(false);
   const [importModalOpen, setImportModalOpen] = useState(false);
   const [editId,setEditId]=useState('');
   const [importId,setImportId]=useState('');
   const [disabled, setDisabled] = useState(true);
   const [titleDataSet, setTitleDataSet] = useState('新建数据集');
   // titleImportData
   const [form] = Form.useForm();
   const [componentstatus, setComponentstatus] = useState<FieldType['tostatus']>('1');
   const [loading, setLoading] = useState(false)
   const [pagination, setPagination] = useState({
      current: 1,
      pageSize: 10,
      total: 1,
      showTotal,
      showSizeChanger: true
   })
   const [modalPagination, setModalPagination] = useState({
      current: 1,
      pageSize: 10,
      total: 1,
      showTotal,
      showSizeChanger: true
   })
   const useStateRef = useRef('')
   const useidRef = useRef(0)
   const [addLineUnique, setAddLineUnique] = useState('$new-line-0')
   const components = {
      body: {
         row: EditableRow,
         cell: EditableCell,
      },
   };
   const draggleRef = useRef<HTMLDivElement>(null);
   const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
   const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
      const { clientWidth, clientHeight } = window.document.documentElement;
      const targetRect = draggleRef.current?.getBoundingClientRect();
      if (!targetRect) {
         return;
      }
      setBounds({
         left: -targetRect.left + uiData.x,
         right: clientWidth - (targetRect.right - uiData.x),
         top: -targetRect.top + uiData.y,
         bottom: clientHeight - (targetRect.bottom - uiData.y),
      });
   };
   const handleOk = () => {
      setIsModalOpen(false);
      setIsNewModalOpen(false);
      setImportModalOpen(false)
   };
   const confrimAdd = () => {
      form
         .validateFields({
            validateOnly: true,
         })
         .then(() => {
            const fromData = form.getFieldsValue() as FieldType;
            if(editId==''){
               // 如果是新增
               fetch(`/SWJDTXT/saveTownds.action?todataNumber=0&toman=${username}&toname=${fromData.toname}&toabbreviation=${fromData.toabbreviation}&tolelvel1=${fromData.tolelvel1 ? fromData.tolelvel1 : ''}&tolelvel2=${fromData.tolelvel2 ? fromData.tolelvel2 : ''}&tolelvel3=${fromData.tolelvel3 ? fromData.tolelvel3 : ''}&tolelvel4=${fromData.tolelvel4 ? fromData.tolelvel4 : ''}&tolelvel5=${fromData.tolelvel5 ? fromData.tolelvel5 : ''}&tostatus=${fromData.tostatus}&todescription=${fromData.todescription?fromData.todescription:''}`, { method: 'POST' }).then(res => {
                  res.text().then(datas => {
                     if (datas == '成功') {
                        handleCancel();
                        message.success('添加成功！');
                        queryData()
                     }
                  })
               })
            }else{
               // editId--就是编辑的行的id
            }
         })
         .catch(() => { });
   }
   const handleCancel = () => {
      setIsModalOpen(false);
      setIsNewModalOpen(false);
      setImportModalOpen(false)
   };
   const showNumbers = (row: DataType) => {
      setChooseAbr(row.toabbreviation);
      // 点击弹框
      setIsModalOpen(true);
      setChoseId(() => {
         useidRef.current = row.toid;
         return useidRef.current
      });
      setTimeout(() => {
         queryModalData(1)
      }, 0)

   }
   const queryModalData = (currentPage?: number, pageSizes?: number) => {
      // 只有点击查询才会从第一页显示，其他的都是按照pagination来显示
      let pageSize = pageSizes ? pageSizes : pagination.pageSize;
      let currentPages = currentPage ? currentPage : pagination.current;
      fetch(`/SWJDTXT/queryTwmand?twpage=${currentPages}&twoid=${useidRef.current}&twman=${useStateRef.current}&twpagesize=${pageSize}&twname=${iputVal}`, { method: 'POST' }).then(res => {
         let resultData = res.json()
         resultData.then(results => {
            if (results instanceof Array && results.length > 0) {
               let data = results[0].data;
               let total = results[0].total;
               setModalPagination({ total: total, current: currentPages, pageSize: pageSize, showTotal, showSizeChanger: true })
               setModaldata(data)
            }
         })
      })
   }
   const handleSave = (row: DataModalType) => {
      if (row.twname.trim() != '') {
         // 开始执行保存函数
         // const index = modaldata.findIndex((item) => row.twid === item.twid);
         let params = `?twname=${row.twname}&twoid=${choseId}&twoname=${row.twoname}&twman=${useStateRef.current}`
         fetch('/SWJDTXT/saveTowndsa' + params, { method: 'POST' }).then(res => {
            res.text().then(txt => {
               if (txt == '成功') {
                  message.success('添加成功');
                  queryModalData(1)
               }
            })

         })
      }
   };
   const handleDelete = (id: number) => {
      fetch('/SWJDTXT/deleteTowndsb.action?tnid=' + id + `&tnman=${useStateRef.current}`, { method: 'POST' }).then(res => {
         res.text().then(datas => {
            if (datas == '成功') {
               message.success('删除成功！');
               queryData()
            } else {
               message.error('删除失败！')
            }
         })
      })
   };
   const handleCountDelete = (id: string) => {
      fetch('/SWJDTXT/deleteTowndsa.action?twid=' + id, { method: 'POST' }).then(res => {
         res.text().then(datas => {
            if (datas == '成功') {
               message.success('删除成功！');
               queryModalData()
            } else {
               message.error('删除失败！')
            }
         })
      })
   }
   const doImport = (id: number) => {
      setImportModalOpen(true)
      setImportId(id+'');
   }
   const editDataSet = (row: DataType) => {
      setIsNewModalOpen(true)
      setTitleDataSet('编辑数据集');
      setEditId(row.toid+'')
      form.setFieldValue('toname',row.toname)
      form.setFieldValue('toabbreviation',row.toabbreviation)
      form.setFieldValue('tolelvel1',row.tolelvel1)
      form.setFieldValue('tolelvel2',row.tolelvel2)
      form.setFieldValue('tolelvel3',row.tolelvel3)
      form.setFieldValue('tolelvel4',row.tolelvel4)
      form.setFieldValue('tolelvel5',row.tolelvel5)
      form.setFieldValue('tostatus','1')
      form.setFieldValue('todescription',row.todescription)
   }
   const columns: TableColumnsType<DataType> = [
      {
         title: '文献名称',
         dataIndex: 'toname',
         key: 'toname',
         fixed: 'left',
         render: (_, record) => <Button type="link" onClick={(e) => editDataSet(record)}>{record.toname}</Button>,
      },
      {
         title: '缩写',
         dataIndex: 'toabbreviation',
         key: 'toabbreviation',
         width: 120,
         ellipsis: true,
      },
      {
         title: '数据量',
         dataIndex: 'todataNumber',
         key: 'todataNumber',
         width: 90,
         render: (_, record) => <Button type="link" onClick={(e) => showNumbers(record)}>{record.todataNumber}</Button>,
      },
      {
         title: '数据修改时间',
         dataIndex: 'tomodifytime',
         key: 'tomodifytime',
         width: 120,
      },
      {
         title: '数据创建时间',
         dataIndex: 'tocreatetime',
         key: 'totime',
         width: 120,
      },
      {
         title: '等级1',
         dataIndex: 'tolelvel1',
         key: 'tolelvel1',
         width: 70,
      },
      {
         title: '等级2',
         dataIndex: 'tolelvel2',
         key: 'tolelvel2',
         width: 70,
      },
      {
         title: '等级3',
         dataIndex: 'tolelvel3',
         key: 'tolelvel3',
         width: 70,
      },

      {
         title: '等级4',
         dataIndex: 'tolelvel4',
         key: 'tolelvel4',
         width: 70,
      },
      {
         title: '等级5',
         dataIndex: 'tolelvel5',
         key: 'tolelvel5',
         width: 70,
      },
      {
         title: '简介',
         dataIndex: 'todescription',
         key: 'todescription',
         width: 280,
         ellipsis: {
            showTitle: false,
         },
         render: (address) => (
            <Tooltip placement="topLeft" title={address}>
               {address}
            </Tooltip>
         ),
      },
      {
         title: '操作',
         key: 'operation',
         fixed: 'right',
         width: 200,
         render: (_, record) => <div><Popconfirm
            title="温馨提示"
            description="你确定要删除这个数据集吗?"
            onConfirm={() => handleDelete(record.toid)}
            okText="确认"
            cancelText="取消"
         >
            <Button type='primary' danger>删除</Button>
         </Popconfirm>
            <Button className='ml-3' onClick={()=>{doImport(record.toid)}} type='primary'>导入</Button>
         </div>,
      },
   ];

   const columnModal: TableColumnsType<DataModalType> = [
      {
         title: '期刊名称',
         dataIndex: 'twname',
         key: 'toname',
         width: 200,
         onCell: (record: DataModalType) => ({
            record,
            editable: true,
            dataIndex: 'twname',
            title: '期刊名称',
            handleSave,
         }),
      },
      {
         title: '缩写',
         width: 80,
         dataIndex: 'twoname',
         key: 'twoname'
      }, {
         title: '操作',
         key: 'operation',
         fixed: 'right',
         width: 100,
         render: (_, record) => <Popconfirm
            title="温馨提示"
            description="你确定要删除这个数据集吗?"
            onConfirm={() => handleCountDelete(record.twid)}
            okText="确认"
            cancelText="取消"
         >
            <Button type='primary' danger disabled={record.twid.toString().indexOf('$new') != -1}>删除</Button>
         </Popconfirm>,
      },
   ]
   useEffect(() => {
      let usernames: string = getCookie('sjhm');
      // if (username == '') {
      // window.location.href="https://www.xsjxkt.com/qd/dl/login"
      // message.warning('请首先登录！');
      // return () => { }
      // }
      setUsername(() => {
         useStateRef.current = usernames;
         return useStateRef.current
      });
      setTimeout(() => {
         queryData();
      }, 0)
      return () => {
         // 组件即将卸载，这里可以做一些清理工作，如取消请求等
      };
   }, [])
   const queryData = (currentPage?: number, pageSizes?: number) => {
      // 只有点击查询才会从第一页显示，其他的都是按照pagination来显示
      let pageSize = pageSizes ? pageSizes : pagination.pageSize;
      let currentPages = currentPage ? currentPage : pagination.current;
      setLoading(true)
      fetch(`/SWJDTXT/queryTnoid?tnman=${useStateRef.current}`, { method: 'POST' }).then(resNumber => {
         let resultNumber = resNumber.json()
         resultNumber.then(resultNumbers => {
            let numberId = resultNumbers[0].shuzi;
            fetch(`/SWJDTXT/queryTonameds?toman=${useStateRef.current}&topage=${currentPages}&topagesize=${pageSize}&toname=${iputVal}`, { method: 'POST' }).then(res => {
               setLoading(false)
               let resultData = res.json()
               resultData.then(results => {
                  if (results instanceof Array && results.length > 0) {
                     let data = results[0].data || results;
                     let total = results[0].total || results.length;
                     if (data && data.length && data.length > 0) {
                        for (let ii = 0; ii < data.length; ii++) {
                           if (numberId && numberId.length && numberId.length > 0) {
                              for (let iis = 0; iis < numberId.length; iis++) {
                                 if (data[ii].toid == numberId[iis][0]) {
                                    data[ii].todataNumber = numberId[iis][1]
                                    break;
                                 }
                              }
                           }
                        }
                     }
                     setPagination({ total: total, current: currentPages, pageSize: pageSize, showTotal, showSizeChanger: true })
                     setData(data)
                  }
               })
            })
         })
      }).catch(() => {
         setLoading(false)
      })
   }
   const changeInputVal = (event: ChangeEvent<HTMLInputElement>) => {
      setIputVal(event.target.value);
   };
   const router = useRouter()
   function onClick(obj: { key: string }) {
      if (obj.key === '1') {
         // 跳转到官网
         window.open('https://www.xsjxkt.com/', '_blank')
      } else {
         // 退出登录
      }
   };
   const onClickMenu: MenuProps['onClick'] = e => {
      if (e.key == '11') {
         // 跳转到用户信息-我的信息页面
         router.push('/user')
      } else if (e.key == '2') {
         // 跳转到自定义数据集-文献管理页面
         router.push('/paperMgt')
      } else if (e.key == '31') {
         // 跳转到自定义数据集-已选数据集页面
         router.push('/dataClub')
      } else if (e.key == '33') {
         // 跳转到自定义数据集-编辑数据集页面
         router.push('/editData')
      }
   };
   const items = [{
      key: '1',
      label: (
         <div>
            <HomeOutlined /><span style={{ marginLeft: 6 }}>回到官网</span>
         </div>
      ),
   }]
   const handleTableChange = (pagination: TableProps<DataType>['pagination']) => {
      if (pagination) {
         setPagination({ total: pagination.total ? pagination.total : 0, current: pagination.current ? pagination.current : 1, pageSize: pagination.pageSize ? pagination.pageSize : 10, showTotal, showSizeChanger: true })
      }
      if (pagination && pagination.current && pagination.pageSize) {
         queryData(pagination.current, pagination.pageSize)
      }
   }
   const addData = () => {
      setTitleDataSet('新建数据集')
      setIsNewModalOpen(true);
      form.resetFields();
      setEditId('');
   }
   const handleModalChange = (pagination: TableProps<DataType>['pagination']) => {
      if (pagination) {
         setModalPagination({ total: pagination.total ? pagination.total : 0, current: pagination.current ? pagination.current : 1, pageSize: pagination.pageSize ? pagination.pageSize : 10, showTotal, showSizeChanger: true })
      }
      if (pagination && pagination.current) {
         queryModalData(pagination.current, pagination.pageSize)
      }
   }
   const addnewLine = () => {
      let lineCount = parseInt(addLineUnique.split('-')[2]);
      let newLineId = '$new-line-' + (++lineCount);
      setAddLineUnique(newLineId);
      console.log('新增的数据的行的标志是：', addLineUnique);
      let newAddLine: DataModalType = {
         twid: addLineUnique, twname: '',
         twoname: chooseAbr
      }
      setModaldata([newAddLine, ...modaldata])
   }
   const downloadTemplate = () => {
      window.open(window.location.origin + '/backend/期刊导入模板.xlsx')
   }
   return <Layout style={{ height: '100%' }}>
      <Sider style={{ backgroundColor: '#ffffff' }} trigger={null} collapsible collapsed={collapsed}>
         <div className="logo" />
         <Menu style={{ backgroundColor: '#ffffff', borderRight: '1px solid #0505050f' }}
            theme="light"
            onClick={onClickMenu}
            mode="inline"
            defaultOpenKeys={['3']}
            defaultSelectedKeys={['32']}
            items={[
               // {
               //    key: '1',
               //    icon: <UserOutlined />,
               //    label: '用户信息',
               //    children: [
               //       {
               //          key: '11',
               //          label: '我的信息',
               //       },
               //    ]
               // },
               {
                  key: '2',
                  icon: <BookOutlined />,
                  label: '文献管理',
               },
               {
                  key: '3',
                  icon: <FileOutlined />,
                  label: '自定义数据集',
                  children: [
                     {
                        key: '31',
                        label: '数据集社区',
                     },
                     {
                        key: '32',
                        label: '我的数据集',
                     }
                  ]
               },
            ]}
         />
      </Sider>
      <Layout className="site-layout" style={{ backgroundColor: '#fff' }}>
         <Header className="site-layout-background" style={{ backgroundColor: '#ffffff', paddingLeft: 12 }}>
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
               className: 'trigger',
               onClick: () => setCollapsed(!collapsed),
            })}
            <div style={{ float: 'right' }}>
               <Dropdown menu={{ items, onClick }}>
                  <a onClick={e => e.preventDefault()}>
                     <UserOutlined /> {username}
                     <DownOutlined style={{ marginLeft: 8 }} />
                  </a>
               </Dropdown>
            </div>
         </Header>
         <Content
            className="site-layout-background"
            style={{
               padding: 12,
               background: 'rgba(0, 0, 0, 0.05)',
               borderRadius: 4
            }}
         >
            <div style={{
               padding: 12,
               background: '#fff',
               borderRadius: 4,
               height: '100%'
            }}>
               <div style={{ marginBottom: 6 }} className='p-1 bg-white'>
                  <Input style={{ display: 'inline-block', width: 240 }} placeholder="文献名称" value={iputVal} onChange={changeInputVal} defaultValue="" />
                  <Button type="primary" style={{ margin: '0 6px' }} onClick={() => { queryData(1, pagination.pageSize) }} autoInsertSpace>
                     查询
                  </Button>
               </div>
               <ConfigProvider locale={zhCN}>
                  <div className='mt-5'>
                     <Button className='mr-2 mb-3' type='primary' onClick={addData}>新建数据集</Button>
                     <Button onClick={downloadTemplate}>导入期刊模板</Button>
                  </div>
                  {/* <Spin spinning={loading} size='large'></Spin> */}
                  <Table
                     size="small"
                     columns={columns}
                     pagination={pagination}
                     bordered
                     onChange={handleTableChange}
                     dataSource={data}
                     loading={loading}
                     rowKey={(record) => record.toid}
                     sticky={{ offsetHeader: 64 }}
                  />
               </ConfigProvider>
            </div>
         </Content>
      </Layout>
      <Modal title={
         <div
            style={{
               width: '100%',
               cursor: 'move',
            }}
            onMouseOver={() => {
               if (disabled) {
                  setDisabled(false);
               }
            }}
            onMouseOut={() => {
               setDisabled(true);
            }}
            onFocus={() => { }}
            onBlur={() => { }}
         // end
         >
            查看数据集期刊详情
         </div>
      } footer={null} width={900} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} modalRender={(modal) => (
         <Draggable
            disabled={disabled}
            bounds={bounds}
            nodeRef={draggleRef}
            onStart={(event, uiData) => onStart(event, uiData)}
         >
            <div ref={draggleRef}>{modal}</div>
         </Draggable>
      )}>
         <div>
            <div>
               <Input style={{ display: 'inline-block', width: 240, marginLeft: 6, marginBottom: 12 }} placeholder="文献名称" value={iputVal} onChange={changeInputVal} defaultValue="" />
               <Button type="primary" style={{ margin: '0 6px' }} onClick={(e) => queryModalData()} autoInsertSpace>
                  查询
               </Button>
               <Button type="primary" style={{ margin: '0 6px' }} onClick={(e) => addnewLine()} autoInsertSpace>
                  新增一行数据
               </Button>
            </div>
            <ConfigProvider locale={zhCN}>
               <Table
                  size="small"
                  columns={columnModal}
                  bordered
                  rowClassName={() => 'editable-row'}
                  components={components}
                  onChange={handleModalChange}
                  pagination={modalPagination}
                  dataSource={modaldata}
                  rowKey={(record) => record.twid}
                  sticky={{ offsetHeader: 64 }}
               />
            </ConfigProvider>
         </div>
      </Modal>
      <Modal title={
         <div
            style={{
               width: '100%',
               cursor: 'move',
            }}
            onMouseOver={() => {
               if (disabled) {
                  setDisabled(false);
               }
            }}
            onMouseOut={() => {
               setDisabled(true);
            }}
            onFocus={() => { }}
            onBlur={() => { }}
         // end
         >
            {titleDataSet}
         </div>
      } footer={null} width={560} open={isNewModalOpen} onOk={handleOk} onCancel={handleCancel} modalRender={(modal) => (
         <Draggable
            disabled={disabled}
            bounds={bounds}
            nodeRef={draggleRef}
            onStart={(event, uiData) => onStart(event, uiData)}
         >
            <div ref={draggleRef}>{modal}</div>
         </Draggable>
      )}>
         <div>
            <Form form={form}
               labelCol={{ span: 5 }}
               wrapperCol={{ span: 17 }}
               initialValues={{ tostatus: componentstatus }}
               layout="horizontal"
            >
               <Form.Item<FieldType> name="toname" label="数据集名称" rules={[{ required: true, message: '请输入数据集名称' }]} >
                  <Input />
               </Form.Item>
               <Form.Item<FieldType> name="toabbreviation" tooltip="缩写将出现页面的颜色块中" label="数据集缩写" rules={[{ required: true, message: '请输入数据集缩写' }]}>
                  <Input />
               </Form.Item>
               <Form.Item<FieldType> name="tolelvel1" label="等级一" tooltip="数据集中的数据分级不能以等级1开始，也不能以等级5结束" >
                  <Input />
               </Form.Item>
               <Form.Item<FieldType> name="tolelvel2" label="等级二">
                  <Input />
               </Form.Item>
               <Form.Item<FieldType> name="tolelvel3" label="等级三">
                  <Input />
               </Form.Item>
               <Form.Item<FieldType> name="tolelvel4" label="等级四">
                  <Input />
               </Form.Item>
               <Form.Item<FieldType> name="tolelvel5" label="等级五">
                  <Input />
               </Form.Item>
               <Form.Item<FieldType> className="hidden" name="tostatus" tooltip="系统会定期清理数据量为0的公开数据" label="分享范围" rules={[{ required: true, message: '请选择分享范围' }]}>
                  <Radio.Group disabled>
                     <Radio value="0"> 公开 </Radio>
                     <Radio value="1"> 私有 </Radio>
                  </Radio.Group>
               </Form.Item>
               <Form.Item<FieldType> name="todescription" label="数据集描述" tooltip="数据集的描述" rules={[{
                  max: 100, message: '最多输入100个字符'
               }]}>
                  <TextArea rows={4} />
               </Form.Item>
            </Form>
            <div style={{ textAlign: 'center' }}> <Button type='primary' onClick={confrimAdd}>确认</Button></div>
         </div>
      </Modal>
      <Modal title={
         <div
            style={{
               width: '100%',
               cursor: 'move',
            }}
            onMouseOver={() => {
               if (disabled) {
                  setDisabled(false);
               }
            }}
            onMouseOut={() => {
               setDisabled(true);
            }}
            onFocus={() => { }}
            onBlur={() => { }}
         // end
         >
            导入期刊数据
         </div>
      } footer={null} width={560} open={importModalOpen} onOk={handleOk} onCancel={handleCancel} modalRender={(modal) => (
         <Draggable
            disabled={disabled}
            bounds={bounds}
            nodeRef={draggleRef}
            onStart={(event, uiData) => onStart(event, uiData)}
         >
            <div ref={draggleRef}>{modal}</div>
         </Draggable>
      )}>
         <div>
            <Dragger {...uploadFileProps}>
               <p className="ant-upload-drag-icon">
                  <InboxOutlined />
               </p>
               <p className="ant-upload-text">点击或拖拽上传.xlxs后缀的文件(注意：需要是-期刊导入模板.xlsx)</p>
               <p className="ant-upload-hint">
                  一次最多只能导入300条期刊数据
               </p>
            </Dragger>
         </div>
      </Modal>
   </Layout>
};

export default DataClub;